<template>
  <div class="pagination">
    <el-button-group>
      <el-button :disabled="prePage_btn" @click="prePage">
        <el-icon class="el-icon--left"><ArrowLeft /></el-icon>
        上一页
      </el-button>
      <el-button :disabled="nxtPage_btn" @click="nxtPage">
        下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </el-button-group>
  </div>
</template>

<script lang="ts">
import { ref, Ref, watch } from "vue";
export default {
  name: "Pagination",
  props: {
    lockNxt: {
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    const currentPage: Ref<number> = ref(1);
    const prePage_btn: Ref<boolean> = ref(true);
    const nxtPage_btn: Ref<boolean> = ref(false);

    //触发上一页
    const prePage = function (): void {
      if (currentPage.value > 1) {
        currentPage.value--;
        emit("prePage", currentPage.value);
      } else {
      }
    };
    //触发下一页
    const nxtPage = function (): void {
      currentPage.value++;
      emit("nxtPage", currentPage.value);
    };

    //监听锁定下一页
    watch(
      () => props.lockNxt,
      (newVal, oldVal) => {
        nxtPage_btn.value = newVal;
      },
      {
        immediate: true,
      }
    );

    //监听首页上一页按钮状态
    watch(
      () => currentPage.value,
      (newVal, oldVal) => {
        if (newVal === 1) {
          prePage_btn.value = true;
        } else {
          prePage_btn.value = false;
        }
      },
      {
        immediate: true,
      }
    );

    return {
      currentPage,
      prePage,
      nxtPage,
      prePage_btn,
      nxtPage_btn,
    };
  },
};
</script>

<style scoped>
.pagination {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 220px;
  height: 50px;
}
</style>